<template>
    <a-modal title="会员录入" class="goods-select-modal" :width="820" :visible="true" cancel-text="取消[Esc]" ok-text="确认[Enter]" @ok="handleOk" @cancel="handleCancel">
        <a-input :autofocus="true"
                ref="inputRef"
                 style="width: 300px;margin-bottom: 10px;"
                 v-model:value="state.formData.inputValue"
                 @focus="handleFocus"
                 @blur="handleBlur" ></a-input>
        <a-table bordered ref="tableRef" :rowClassName="(record,index)=>{
            return state.current===index?'active-row':'';
        }" :columns="columns" :dataSource="state.dataList" :pagination="false" :scroll="{y:400}">
          <template #bodyCell="{record,column}">
                <template v-if="column.dataIndex==='gender'">
                    {{ record.gender===0?"女":"男" }}
                </template>  
          </template>    
    </a-table>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive,onMounted,onBeforeUnmount,nextTick,ref } from "vue";
import { GoodsService,PackageService, UserService} from "@/service/index";
import { message } from "ant-design-vue";

const state = reactive<{
    dataList:any[];
    current:number;
    formData:{
        inputValue: string
    },
    inputIsFocus: boolean
}>({
    dataList:[],
    current:0,
   formData:{
    inputValue:""
   },
   inputIsFocus:false
})

const tableRef = ref()
const inputRef = ref()

const emit = defineEmits<{
    (e:"ok",value:any):void,
    (e:"cancel"):void
}>()

onMounted(async()=>{
    nextTick(()=>{
       inputRef.value.focus()
    })
    window.addEventListener("keydown",handleKeydown)
  
})

onBeforeUnmount(()=>{
    window.removeEventListener("keydown",handleKeydown)
})

const handleFocus = ()=>{
    state.inputIsFocus = true;
}

const handleBlur = ()=>{
    state.inputIsFocus = false;
}

const handleKeydown = (e:any)=>{
   
    const code = e.code;
  
    if(["ArrowDown","ArrowUp","Enter","Esc","NumpadEnter"].includes(code)){
        e.preventDefault();
    }
    if(code === "ArrowDown"){
        state.current++;
        if(state.current>state.dataList.length-1)state.current=0;
    }else if(code === "ArrowUp"){
        state.current--;
        if(state.current<0)state.current=state.dataList.length-1;
    }else if(code === "Enter" || code==="NumpadEnter"){
        //不在输入框内
        if(!state.inputIsFocus){
            handleOk()
        }else if(state.formData.inputValue){
              //在输入框内，获取会员信息
            state.inputIsFocus = false;
            getMembers()
        }
        return
    }else if(code === "Esc"){
        handleCancel()
        return
    }
    return;
    nextTick(()=>{
       let pos = (document.querySelector(".active-row") as HTMLDivElement).getBoundingClientRect();
       const tableBody = tableRef.value.$el.querySelector(".ant-table-body");
       let tablePos = tableBody.getBoundingClientRect();

     
       let scrollTop = pos.top+pos.height+tableBody.scrollTop - tablePos.top - tablePos.height;
       console.log("----",pos.height,pos.top,tablePos.top,tablePos.height,scrollTop)
       tableBody.scrollTop = scrollTop>0?scrollTop:0
    })
}

const columns = [
    {title:"真实姓名",dataIndex:"realName",width:160},
    {title:"手机号",dataIndex:"mobile",width:200},
    {title:"昵称",dataIndex:"nickName",width:160},
    {title:"性别",dataIndex:"gender",width:160},
    {title:"生日",dataIndex:"birthday",width:160}
]

const getMembers = async()=>{
    console.log("会员信息")
    let res = await UserService.memberList(state.formData.inputValue);
    if(res.code===0){
        state.dataList = res.data || [];
        inputRef.value.blur();
    }
}

const handleOk = ()=>{
    let val = state.dataList[state.current];
    if(val){
        emit("ok",val);
    }else{
        return message.error("没有选择会员")
    }
    
}

const handleCancel = ()=>{
    emit("cancel");
}

</script>

<style lang="less" >

.goods-select-modal .ant-table-row.active-row{
    .ant-table-cell{
        border-top: 2px solid #7546c9;
        border-bottom: 2px solid #7546c9;
        background-color:lighten(#7546c9,40)
    }    
}

</style>